<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-on:click="handleClickFn">点击事件</p>
        <!-- 事件不传参 -->
        <p @click="addCountFn">{{count}}</p>
        <!-- 事件的传参 -->
        <p @click="addCountFn1(50)">事件传参--{{count}}</p>
        <!-- 事件对象 -->
        <p @click="handleClickFn1">事件对象-第一种情况</p>
        <!-- 事件对象带参数 -->
        <p @click="handleClickFn2($event,'关羽')">事件对象-第二种情况--{{msg}}</p>
        <!-- 使用自定义方法 -->
        <p @click="count++">{{doubleCount()}}</p>

    </div>

</body>

</html>
<script>
    // v-on 内置指令: 在vue中使用该指令绑定事件
    // 语法: v-on:事件名= '事件执行函数';
    // 简写: @事件名= '事件处理函数'
    // 注意:事件中的 this === 当前组件实例
    // 注意: 在methods 中书写的方法 也会挂载到当前组件实例上 this.方法名就可以访问

    //事件对象: 
    // 第一种情况: 当事件处理函数没有参数传递的时候, 那么默认参数就是事件对象
    // 第二种情况: 当事件处理函数中有参数时, 事件对象为$event,该变量名为固定写法(不能更改)


    //  当修改data中的数据的时候, vue 监听到数据的变化, 并直接修改对应的dom
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                count: 100,
                msg: '刘备'
            }
        },
        methods: { // 方法
            handleClickFn() {
                console.log('点击事件');
            },
            addCountFn() {
                console.log('count');
                console.log(this); // this指向当前的根实例app
                // console.log(app);
                // console.log(this.count);
                this.count++
            },
            addCountFn1(m) {
                console.log('m', m);
                this.count += m
            },
            handleClickFn1(e) {
                console.log('事件对象', e.target.innerHTML);
            },
            handleClickFn2(e, name) {
                console.log('name', name);
                console.log('e', e);

            },
            // 自定义方法
            doubleCount() {
                return this.count * 2
            }

        }
    }).mount('#app')


</script>